<script setup lang="ts">
import HomeRequest from '@/request/homeRequest';
import AdditionalInformation from '@/subcontract/home/component/additionalInformation/index.vue';

interface IProps {
  products: IProductInformation[];
}

interface IState {
  additionalFormAction: number;
  goodsAdditionalForm: IGoodsAdditionalInfo[][];
  additionalForm: IGoodsAdditionalInfo[][];
  resultAttrData: IGoodsAdditionalInfo[][];
}

type EmitEvents = {
  (event: 'change', payload: IGoodsAdditionalInfo[][]): void;
};

const props = defineProps<IProps>();
const state = reactive<IState>({ goodsAdditionalForm: [], additionalForm: [], resultAttrData: [], additionalFormAction: 0 });
const emits = defineEmits<EmitEvents>();

onMounted(() => {
  const ruleIds = props.products.map((item) => item.ruleId).toString();
  const thirdClassifyIds = props.products.map((item) => item.thirdClassifyId).toString();
  const serverIds = props.products.map((item) => item.serverId).toString();
  const goodsIds = props.products.map((item) => item.goodsId).toString();
  const businessIds = props.products.map((item) => item.businessId).toString();
  HomeRequest.ObtainProductExtraInfo({ ruleIds, thirdClassifyIds, serverIds, goodsIds, businessIds, hasLoading: true }).then((res) => {
    if (res.data) {
      if (res.data['1']) {
        Object.keys(res.data['1']).forEach((key) => {
          state.goodsAdditionalForm.push(res.data!['1']![key]);
        });
        state.resultAttrData[0] = state.goodsAdditionalForm.flat(1);
      }
      if (res.data['2']) {
        state.additionalForm = res.data['2'];
        state.resultAttrData[1] = res.data['2'][0];
      }
      emits('change', state.resultAttrData);
    }
  });
});

// 附加信息组件change
const handleAdditionalInfoChange = (data: IGoodsAdditionalInfo, index: number) => {
  state.resultAttrData[index] = state.resultAttrData[index].map((item) => (item.attrId === data.attrId ? data : item));
  emits('change', state.resultAttrData);
};

// 筛选符合条件的产品信息
const finterGoodsInfo = (data: IGoodsAdditionalInfo): IProductInformation | undefined => {
  if (data.serverId) {
    return props.products.find((item) => item.serverId === data.serverId);
  } else {
    return props.products.find((item) => item.goodsId === data.goodsId);
  }
};
</script>

<template>
  <view class="py-12px mt-12px c-pd bg-white c-br orderAdditionalInfo" v-for="(item, index) in state.goodsAdditionalForm" :key="index">
    <view class="fw-bold">{{ finterGoodsInfo(item[0])!.name }} - 附加信息</view>
    <view class="c-text-12 c-text-color-grey" v-if="finterGoodsInfo(item[0])">{{ finterGoodsInfo(item[0])!.introduce }}</view>
    <van-divider />
    <AdditionalInformation :formList="item" @change="({ data }) => handleAdditionalInfoChange(data, 0)" />
  </view>
  <template v-if="state.additionalForm.length !== 0">
    <view class="c-br mt-12px c-pd bg-white orderAdditionalInfo">
      <view class="fw-bold">附加信息</view>
      <van-divider />
      <van-tabs
        v-if="state.additionalForm.length > 1"
        :active="state.additionalFormAction"
        @change="
          (e: any) => {
            state.additionalFormAction = e.detail.name;
            state.resultAttrData[1] = state.additionalForm[e.detail.name];
          }
        "
      >
        <van-tab :title="`填写方式${index + 1}`" :name="index" v-for="(_, index) in state.additionalForm" :key="index" />
      </van-tabs>
      <AdditionalInformation :formList="state.additionalForm[state.additionalFormAction]" @change="({ data }) => handleAdditionalInfoChange(data, 1)" />
    </view>
  </template>
</template>
